<template>
	<div class="home-section">
		<div class="tab-page cant-tab-page">
			<keep-alive>
				<router-view></router-view>
			</keep-alive>
		</div>
			<van-tabbar 
				class="tab-bar" 
				v-model="$store.state.home.active"
				@change="tabChange"
			>
				<van-tabbar-item name="/index">
					<span>首页</span>
					<template #icon="props">
						<img v-if="props.active" src="../../assets/images/tab-index-active@2x.png" />
						<img v-else src="../../assets/images/tab-index@2x.png" />
					</template>
				</van-tabbar-item>
				<van-tabbar-item name="/event">
					<span>应急事件</span>
					<template #icon="props">
						<img v-if="props.active" src="../../assets/images/tab-event-active@2x.png" />
						<img v-else src="../../assets/images/tab-event@2x.png" />
					</template>
				</van-tabbar-item>
				<van-tabbar-item name="/serve">
					<span>应急服务</span>
					<template #icon="props">
						<img v-if="props.active" src="../../assets/images/tab-serve-active@2x.png" />
						<img v-else src="../../assets/images/tab-serve@2x.png" />
					</template>
				</van-tabbar-item>
				<van-tabbar-item name="/mine">
					<span>我的</span>
					<template #icon="props">
						<img v-if="props.active" src="../../assets/images/tab-mine-active@2x.png" />
						<img v-else src="../../assets/images/tab-mine@2x.png" />
					</template>
				</van-tabbar-item>
			</van-tabbar>
	</div>
</template>

<script>
export default {
	name:'',
	components: {},
	data() {
		return {
			
		}
	},
	activated(){
		// console.log(this)
	},
	methods: {
		tabChange(active){
			this.$router.push({
				path:active
			})
		}
	}
}
</script>
<style scoped lang="scss">
.home-section{
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	.tab-page{
		&.cant-tab-page{
			height: calc(100% - 50px);
			overflow: hidden;
		}
	}
	.tab-bar{
		position: relative;
	}
}
</style>